<template>
  <page-header-wrapper :title="false">
    <a-card>
      <standard-form-row title="视频名称" block>
        <a-input-search style="width: 300px" placeholder="请输入要搜索的内容" />
      </standard-form-row>
      <standard-form-row title="培训分类" block>
        <a-radio-group v-model="currentRadio" @change="onRadio">
          <a-radio-button :value="item.id" v-for="item in classes" :key="item.id">
            {{item.title}}
          </a-radio-button>
        </a-radio-group>
      </standard-form-row>
    </a-card>
    <p></p>
    <a-card>
      <a-spin :spinning="loading">
        <a-row :gutter="[30,30]">
          <a-col :span="4" v-for="item in videos" :key="item.id">
            <a-card hoverable @click="onPlayVideo(item)">
              <img
                slot="cover"
                :src="item.cover"
              >
              <a-card-meta>
                <a style="color:#000" slot="title">
                  【{{item.class_title}}】{{item.title}}
                </a>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
        <div :style="{ textAlign: 'right' }">
          <a-divider />
          <a-pagination :pageSize="18" :total="total" @change="onChange" show-less-items />
        </div>
      </a-spin>
    </a-card>
    <player-wrapper v-if="visible" :video="video" @cancel="onCancel"></player-wrapper>
  </page-header-wrapper>
</template>

<script>
import { StandardFormRow } from '@/components'
import PlayerWrapper from './components/PlayerWrapper'
import { getClass, getVideoList } from '@/api/video'
export default {
  components: {
    StandardFormRow,
    PlayerWrapper
  },
  name: 'VideoList',
  data () {
    return {
      loading: false,
      currentRadio: '1',
      classes: [],
      queryParam: {},
      videos: [],
      visible: false,
      video: {},
      total: 0
    }
  },
  created () {
    this.queryParam['page'] = 1
    this.queryParam['page_size'] = 18
    this.getClasses()
  },
  methods: {
    getClasses () {
      const app = this
      getClass().then(res => {
        app.classes = res.result.data
      }).finally(() => {
        app.getList()
      })
    },
    getList () {
      this.loading = true
      this.queryParam['filter[class]'] = this.currentRadio
      getVideoList(this.queryParam).then(res => {
        this.total = res.result.total_count
        this.videos = res.result.data
        this.loading = false
      })
    },
    onRadio (e) {
      this.currentRadio = e.target.value
      this.getList()
    },
    onPlayVideo (video) {
      this.video = video
      this.visible = true
    },
    onCancel (visible) {
      this.visible = visible
    },
    onChange (page, pageSize) {
      this.queryParam['page'] = page
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
